<template>
    <div class="container">
        <my-head></my-head>
      <img class="head-img" src="../assets/img/b1.jpg" alt="">
      <div class="lx">
        <h2>Information</h2>
        <h3>联系方式</h3>
      </div>
        <div class="lxwm">
            <div>

              <h2><b>杭州拓野集装箱制造有限公司</b></h2>
                <h2>联系人：<b>常经理</b></h2>
                <h2>手机：<b>15356717080</b></h2>
                <h2>联系邮箱：545508392@qq.com</h2>
                <h2>杭州市西湖百家园路68号润龙-西溪文创园</h2>
                 <img src="../assets/img/erw.png">
                  <h3>扫描二维码关注我们吧！</h3>

            </div>
            <div>
              <baidu-map
                class="bm-view"
                :center="center"
                :zoom="zoom"
                @ready="handler"
                :auto-resize="true"
                :scroll-wheel-zoom="true"
              >
                <bm-marker

                  :position="{ lng:120.095541, lat: 30.294196 }"
                  @click="clickHandler(points.content,points.lng,points.lat)"
                  :icon="points.icon"

                >
                </bm-marker>
                <bm-info-window
                  :show="show"
                  :position="windowposition"
                  @close="infoWindowClose"
                  @open="infoWindowOpen"
                >{{content}}</bm-info-window
                >


              </baidu-map>
            </div>

        </div>

      <my-foot></my-foot>
    </div>
</template>

<script>

export default {
  data() {
    return {
    center: {  lng: 120.095541,lat: 30.294196 },
      // center: {lng: 112, lat: 37},
      zoom: 12,
      points: {
        content: "贵公司",
        ico: "require(’../assets/imimg/dww.png’)",
        lat: "120.095541 ",
        lng: "30.294196"
      },
      windowposition: {},
      content: {},
      show: false,
      icon: {url: "require(’../assets/imimg/dww.png’)"},
    }
  },
  mounted() {

  },
  methods: {

    //地图实例
    handler({BMap, map}) {
      this.center.lng = 120.095541;
      this.center.lat = 30.294196;
      this.zoom = 12;
    },
    clickHandler(content, lng, lat) {
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
      this.windowposition = {lng: lng, lat: lat};
      this.content = content;
      this.show = true;
    },

    infoWindowOpen() {
      this.show = true;
    },
    infoWindowClose() {
      this.show = false;
    },
  }


}
</script>

<style scoped lang="less">
.head-img{
  width: 100%;
  height: auto;
}
.lx{
  h2{font-size: 32px; color: #ba0027; text-align: center; line-height: 60px;}
  h3{font-size: 22px; color: #333333; text-align: center}

}
  .lxwm{
    width: 80%;
    height: 600px;
    margin: 50px auto;
    display: flex;
    border: 4px solid #1b0d09;
    box-sizing: border-box;

    div:nth-child(1){
      padding: 10px 10px 10px 20px;
      box-sizing: border-box;
      width: 30%;
      background: #2e2e2e;
      color: #FFFFFF;
      h2{
        font-size: 14px;
        margin-top: 20px;
      }
      img{
        width: 100px;
        height: 100px;
        margin: 20px 0;
      }
    }
    div:nth-child(2){
      overflow: hidden;
      box-sizing: border-box;
      width: 70%;
      .bm-view{
        width: 100%;
        height: 600px;
      }
    }
  }
</style>
